<template>
  <div class="top-info">
    <h3>基本信息</h3>
    <!-- 每行三列，每列用 .info-item 包裹（标签+内容） -->
    <div class="info-row">
      <div class="info-item">
        <span class="label">客户名称：</span>
        <span class="content">{{ info.customerName }}</span>
      </div>
      <div class="info-item">
        <span class="label">业务类型：</span>
        <span class="content">{{ info.businessType }}</span>
      </div>
      <div class="info-item">
        <span class="label">呼入主机：</span>
        <span class="content">{{ info.callInNumber }}</span>
      </div>
    </div>
    <div class="info-row">
      <div class="info-item">
        <span class="label">被叫号码：</span>
        <span class="content">{{ info.calledNumber }}</span>
      </div>
      <div class="info-item">
        <span class="label">通话时长：</span>
        <span class="content">{{ info.callDuration }}</span>
      </div>
      <div class="info-item">
        <span class="label">呼叫时间：</span>
        <span class="content">{{ info.callTime }}</span>
      </div>
    </div>
    <div class="info-row">
      <div class="info-item">
        <span class="label">接入时间：</span>
        <span class="content">{{ info.accessTime }}</span>
      </div>
      <div class="info-item">
        <span class="label">检出时间：</span>
        <span class="content">{{ info.outTime }}</span>
      </div>
      <div class="info-item">
        <span class="label">VOS 客户名称：</span>
        <span class="content">{{ info.vosAccount }}</span>
      </div>
    </div>
    <div class="info-row">
      <div class="info-item">
        <span class="label">主机检出网关：</span>
        <span class="content">{{ info.mainModel }}</span>
      </div>
      <div class="info-item">
        <span class="label">服务窗口：</span>
        <span class="content">{{ info.serviceWindow }}</span>
      </div>
      <div class="info-item">
        <span class="label">客户 IP：</span>
        <span class="content">{{ info.customerIp }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  info: {
    type: Object,
    required: true,
    // 定义默认值，避免无数据时报错
    default: () => ({
      customerName: '-',
      businessType: '-',
      callInNumber: '-',
      calledNumber: '-',
      callDuration: '-',
      callTime: '-',
      accessTime: '-',
      outTime: '-',
      vosAccount: '-',
      mainModel: '-',
      serviceWindow: '-',
      customerIp: '-'
    })
  }
})
</script>

<style lang="scss" scoped>
.top-info {
  background-color: #fff;
  padding: 20px; // 优化内边距，避免内容拥挤
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; // 确保 padding 不撑大容器
  margin: 0; // 清除原有的 20px margin（避免与父容器 .base-card 的 padding 叠加）
}

// 标题样式
h3 {
  margin: 0 0 16px; // 仅底部留间距，与内容区分
  font-size: 16px;
  font-weight: bold;
  color: #333; // 标题深灰色，比标签略浅
}

// 每行容器：Flex 布局，控制三列分布
.info-row {
  display: flex;
  justify-content: space-between; // 三列两端对齐，中间间距均匀
  align-items: center; // 垂直居中（避免行高不一致导致错位）
  margin-bottom: 12px; // 行与行之间的间距，优化可读性
  font-size: 14px; // 内容字体大小，平衡美观与容纳度
}

// 每列容器（标签+内容）：平分宽度，确保三列平均
.info-item {
  flex: 1; // 核心：三列平分父容器宽度
  padding: 0 8px; // 列之间的横向间距，避免内容贴边
  white-space: nowrap; // 禁止列内换行（保持一行显示）
}

// 标签样式：黑色加粗
.label {
  font-weight: bold; // 加粗
  color: #999; //
  margin-right: 6px; // 标签与内容的间距
}

// 内容样式：控制长文本溢出
.content {
  color: #000; //
  font-weight: bold;  //字体加粗
  font-size: 14px;
  max-width: 100%; // 内容最大宽度不超过列宽
  white-space: nowrap; // 禁止换行
  overflow: hidden; // 隐藏超出部分
  text-overflow: ellipsis; // 超出显示省略号（...）
}

// 最后一行取消底部间距，避免多余留白
.info-row:last-child {
  margin-bottom: 0;
}
</style>
